<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useSubset } from '@/hooks/subsetHook'
const { getSubset, subsetList } = useSubset()

const emit = defineEmits(['nowSubsetId'])

const props = defineProps({
  classify: {
    type: Number,
    default: 0,
  }
})


// 当前选择
const selected = ref<number|string>(-1);

// // 选择切换
const changeSelected = (id: number |string): void => {
    selected.value = id ;
    emit('nowSubsetId', id)
};


onMounted(() => {
  getSubset(props.classify)
})


</script>

<template>
<div class="lg:w-[900px] md:w-[470px] sm:w-[300px] flex flex-row flex-wrap  gap-4 py-4 px-6 mb-10">

    <div 
      v-for="item in subsetList" 
      :key="item.id" 
      @click="changeSelected(item.id)"
      :class="[
        'relative group cursor-pointer lg:px-6 lg:py-3 sm:px-2 sm:py-1 rounded-xl font-medium text-lg',
        'transition-all duration-300 ease-out transform',
        'border-2 border-transparent',
        selected === item.id
          ? 'bg-sky-500 text-white shadow-lg scale-105'
          : 'bg-white text-gray-700 hover:bg-gray-50 hover:scale-105 hover:shadow-md',
        'hover:border-sky-300'
      ]"
    >
      <!-- 内容区域 -->
      <div class="relative z-10 flex items-center space-x-2">
        <span :class="[
          'font-bold',
          'sm:text-base lg:text-xl',
          selected === item.id ? 'text-white' : 'text-gray-800'
        ]">{{ item.name }}</span>
        <span :class="[
          'px-2 py-1 rounded-full sm:text-sm lg:text-lg',
          selected === item.id 
            ? 'bg-white/20 text-white' 
            : 'bg-sky-100 text-sky-700 group-hover:bg-sky-200'
        ]">{{ item.value }}</span>
      </div>

    </div>
  </div>
</template>

<style scoped>
/* 添加自定义动画 */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.group:hover::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #60a5fa;
  border-radius: 0.75rem;
  opacity: 0;
  animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
